<template>
  <template v-if="data.orders.length>0">
    <el-row class="bg-gray py-1 center" align="middle">
      <el-col :span="9">宝贝</el-col>
      <el-col :span="2">单价</el-col>
      <el-col :span="2">数量</el-col>
      <el-col :span="3">操作</el-col>
      <el-col :span="3">实付款</el-col>
      <el-col :span="3">交易状态</el-col>
      <el-col :span="2">交易操作</el-col>
    </el-row>
    <el-row justify="end" style="text-align: right;" class="my-1">
      <el-col :span="4">
        <el-button>上一页</el-button>
        <el-button>下一页</el-button>
      </el-col>
    </el-row>
    <div class="border-gray mb-1" v-for="(item,i) in orderList" :key="i">
      <el-row class="bg-gray py-1 center" align="middle">
        <el-col :span="3" class="px-1"><el-checkbox v-model="data.checked"></el-checkbox> {{ formattedDate(item.timestamp) }}</el-col>
        <el-col :span="5">订单号:{{ item.id }}</el-col>
        <el-col :span="12" :offset="3">
          <router-link to="/service"><el-icon><ChatRound /></el-icon> 和我联系</router-link>
        </el-col>
        <el-col :span="1" class="pointer">
            <el-popconfirm onfirm-button-text="是" cancel-button-text="否" :icon="InfoFilled"
              icon-color="#626AEF" title="你真的要删除此订单吗?"
              @confirm="confirmEvent(item.id)"
              @cancel="cancelEvent">
              <template #reference>
                <el-icon :size="18"><Delete /></el-icon>
              </template>
            </el-popconfirm>
        </el-col>
      </el-row>
      <el-row align="middle" class="center">
        <el-col :span="3" ><img :src="item.img" class="w-100"></el-col>
        <el-col :span="6" class="px-1" >{{ item.desc }}</el-col>
        <el-col :span="2">{{ item.price }}</el-col>
        <el-col :span="2">{{ item.num }}</el-col>
        <el-col :span="3"><router-link to="/service">申请售后</router-link></el-col>
        <el-col :span="3">&yen;{{ item.price*item.num }}</el-col>
        <el-col :span="3">{{ tradingStatus(item.status) }}</el-col>
        <el-col :span="2"><el-button >评价</el-button></el-col>
      </el-row>
    </div>
  </template>
  <template v-else>
    <div class="empty">还没有订单哦，赶紧去购物下单吧！</div>
  </template>
</template>


<script setup>
import { reactive,defineProps,computed,onMounted } from 'vue'
import { ChatRound,InfoFilled,Delete } from '@element-plus/icons-vue'
import { useRoute } from "vue-router"
const route = new useRoute()
const data = reactive({
  checked:true,
  orders:[]
})
let orderList = computed(()=>{
  const status = route.query.status
  if(!status || status =="0") {
    return data.orders
  }else{
    let length = data.orders.length;
    const temp = []
    for(let i=0;i<length;i++) {
      if(data.orders[i].status==status){
        temp.push(data.orders[i])
      }
    }
    return temp
  }
})
let formattedDate = (timestamp)=>{
  const date = new Date(timestamp);   // 根据时间戳创建Date对象
  const year = date.getFullYear();    // 获取年份
  const month = date.getMonth() + 1;  // 获取月份，需要加1
  const day = date.getDate();         // 获取日期
  const formattedDate = `${year}-${month}-${day}`; // 拼接成格式化后的日期字符串
  return formattedDate
}
let tradingStatus = (status)=>{
  let str=""
  if(!status || status=="0" || status=="4") {
    str="交易成功"
  }else if(status == "1"){
    str="待付款"
  }else if(status == "2"){
    str="待发货"
  }else{
    str="待收货"
  }
  return str
}

//确认从订单删除
const confirmEvent = (id) => {
  let length = data.orders.length;
  for(let i=0;i<length;i++) {
    if(data.orders[i].id==id){
      data.orders.splice(i,1)
      break;
    }
  }
  //更新订单
  updateOrders(data.orders)
}

//更新订单
let updateOrders= (orders)=>{
  localStorage.setItem("myOrders",JSON.stringify(orders))
}

//获取订单数据
const getMyOrders = ()=>{
  data.orders=JSON.parse(localStorage.getItem("myOrders"))
}

onMounted(()=>{
  getMyOrders()
})

</script>

<style scoped>
.empty{
  border-top:none;
}
</style>

